<template>
    <section>
        <!--工具条 高级查询 + 添加-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="queryParams">
                <el-form-item>
                    <el-input v-model="queryParams.keyword" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="pageParams.departments" highlight-current-row v-loading="listLoading" @row-dblclick="show"
                  @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="140" sortable>
            </el-table-column>
            <el-table-column prop="sn" label="编号" width="120" sortable>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条  批量删除-->
        <!--disabled="this.sels.length===0  选中长度为0 就禁用(至少选中一行)-->
        <el-col :span="24" class="toolbar">

            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next"
                           @current-change="handleCurrentChange"
                           :page-size="queryParams.pageSize"
                           :total="pageParams.totals"
                           :current-page="queryParams.currentPage" style="float:right;">
            </el-pagination>
        </el-col>

        <!--添加或修改的模态框-->
        <el-dialog :title="title" :visible.sync="saveFormVisible" :close-on-click-modal="false">

            <el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="saveForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="编号" prop="sn">
                    <el-input v-model="saveForm.sn" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="saveFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="saveSubmit" :loading="saveLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--=============================================================================-->
        <el-drawer
                title="类型明细表"
                :visible.sync="drawer"
                :with-header="false">
            <span>

                <!--工具条 高级查询 + 添加-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="queryParams">
                <el-form-item>
                    <el-input v-model="queryParams.keyword" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

                <!--列表-->
        <el-table :data="pageParams.departments" highlight-current-row v-loading="listLoading"
                  @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="types_id" label="类型" width="140" sortable>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="140" sortable>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

                <!--工具条  批量删除-->
                <!--disabled="this.sels.length===0  选中长度为0 就禁用(至少选中一行)-->
        <el-col :span="24" class="toolbar">

            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next"
                           @current-change="handleCurrentChange"
                           :page-size="queryParams.pageSize"
                           :total="pageParams.totals"
                           :current-page="queryParams.currentPage" style="float:right;">
            </el-pagination>
        </el-col>

                <!--添加或修改的模态框-->
        <el-dialog :title="title" :visible.sync="saveFormVisible" :close-on-click-modal="false">

            <el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
                <el-form-item label="类型id" prop="types_id">
                    <el-input v-model="saveForm.types_id" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="saveForm.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="saveFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="saveSubmit" :loading="saveLoading">提交</el-button>
            </div>
        </el-dialog>


            </span>
        </el-drawer>
    </section>
</template>


<script>
    export default {
        data() {
            return {

                drawer: false,
                type_ids: [],
                Detail: [],
                Type: [],
                Types:[],


                pageParams: {
                    departments: [],
                    totals: 0,
                },
                queryParams: {
                    pageSize: 5,
                    currentPage: 1,
                    keyword: ''
                },





                listLoading: false,
                //listLoading2: false,
                //批量删除  保存选中的列
                sels: [],//列表选中列


                title:"保存",     //添加和修改模态框 的标题
                saveFormVisible: false,//编辑和修改模态框是否显示
                typeFormVisible:false,
                saveLoading: false,    //保存模态框   默认不显示
                saveFormRules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    sn: [
                        {required: true, message: '请输入编号', trigger: 'blur'}
                    ]
                },


                //编辑界面数据
                saveForm: {
                    id: null,
                    name: null,
                    sn: null,
                },
                managers:[],
                empTree:[]
            }
        },



        methods: {


            show(row){
                //alert(1)
                //console.log(row);

                this.drawer = true;

            },

            /*<!-- =================================================================== -->*/

            //高级查询
            search() {
                this.queryParams.currentPage = 1;
                this.getDepartments();
            },

            //点击分页逻辑
            handleCurrentChange(val) {
                this.queryParams.currentPage = val;
                this.getDepartments();
            },


            //获取部门列表
            getDepartments() {
                this.listLoading = true;  //显示忙等框
                this.$http.post("/dictionary", this.queryParams)//请求地址和 参数  3个参数
                //接受后端数据  进行赋值
                    .then(res => {//成功之后的回调函数
                        console.log(res);
                        //分页栏
                        this.pageParams.totals = res.data.total; //后端数据为total 前端封装为totals 此处报过错(没数据)
                        this.pageParams.departments = res.data.rows;//列表展示数据
                        this.listLoading = false;  //关闭忙等框
                    }).catch(res => {
                    this.$message.error("系统错误 请稍后重试");
                })
            },

           /* //明细列表
            getDepartments2() {
                this.listLoading2 = true;  //显示忙等框
                this.$http.post("/detail", this.queryParams)//请求地址和 参数  3个参数
                //接受后端数据  进行赋值
                    .then(res => {//成功之后的回调函数
                        console.log(res);
                        //分页栏
                        this.pageParams2.totals = res.data.total; //后端数据为total 前端封装为totals 此处报过错(没数据)
                        this.pageParams2.departments = res.data.rows;//列表展示数据
                        this.listLoading2 = false;  //关闭忙等框
                    }).catch(res => {
                    this.$message.error("系统错误 请稍后重试");
                })
            },
*/



            //删除
            handleDel: function (index, row) {
                //确认框
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => { //点击确定之后的操作
                    this.listLoading = true;  //显示忙等框
                    this.$http.delete("/dictionary/" + row.id) //拼接 路径加id
                        .then(res => {
                            //console.log(res);
                            this.listLoading = false;//关闭忙等框
                            if (res.data.success) {//成功
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.getDepartments(); //重新加载数据

                            } else {  //删除失败进入
                                this.$message({
                                    message: res.data.message,
                                    type: 'error'
                                });
                            }
                        }).catch(res => {
                        this.$message.error("系统错误 请稍后重试"); //连接不到后台
                    })
                }).catch(() => {  //点击取消之后的操作
                });
            },

            //点击按钮  弹出模态框
            handleEdit: function (index, row) {
                this.saveFormVisible = true;//显示模态框
                this.title = "修改";
                this.saveForm = Object.assign({}, row);//克隆  回显

                //点击修改操作 对上级部门的回显做处理
                var dirPath = row.dirPath;
                var idArr = dirPath.split("/");
                var arr = [];
                for(var i=1;i<idArr.length-1;i++){
                    var id = parseInt(idArr[i]);
                    arr[i-1] = id;
                }
                this.saveForm.parent = arr;

                this.getDepartments(); //加载所有的经理 员工
            },

            //显示新增界面
            handleAdd: function () {
                this.saveFormVisible = true;//显示模态框
                this.title = "添加";
                //清空之前的数据
                this.saveForm = {
                    id: null,
                    sn: null,
                    name: null,
                };
                this.getDepartments(); //加载所有的经理 员工
            },

            //点击保存按钮  提交到后端
            saveSubmit: function () {
                //提交验证  只要表单不通过都不能提交
                this.$refs.saveForm.validate((valid) => {
                    //如果验证通过返回true
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.saveLoading = true; //显示忙等框



                            //提交的数据
                            let para = Object.assign({}, this.saveForm);

                            this.$http.put("/dictionary",para).then(res =>{
                                this.saveLoading = false; //关闭模态框
                                if(res.data.success){
                                    this.$message({
                                        message: '操作成功',
                                        type: 'success'
                                    });
                                    this.saveFormVisible = false;//关闭模态框
                                    this.getDepartments();
                                }else{
                                    this.$message({
                                        message: res.data.message,
                                        type: 'error'
                                    });
                                    this.saveLoading = false; //关闭模态框
                                }

                            }).catch(res =>{
                                this.$message.error("系统错误 请稍后重试");
                            })
                        });
                    }
                });
            },




        },
        mounted() {
            this.getDepartments();
            //this.getDepartments2();
        }
    }

</script>

<style scoped>

</style>